<template>
	<view style="background: #F1F5FF; height: 100vh;">
		
		<myHeadTab :needBack="false"> 更多功能</myHeadTab>
		
		<view style="height: 32rpx;width: 100%;"></view>
		
		<template v-for="(item,index) in abilities">
			<uni-row >
				<uni-col :span="22" :offset="1">
					<view class="card"  @click="item.clickFunction">
						
						<view style="height: 38rpx;width: 100%;"></view>
						
						<view style="height: 76rpx;width: 100%;display: flex" >
							
							<view style="height: 100%;width: 32rpx;"></view>
							
							<view style="height: 100%;width: 1244rpx;display: flex;">
								<view style="width: 16rpx;height: 100%;"></view>
								
								<image style="width: 76rpx;height: 76rpx;" :src="item.icon"></image>
								<view style="height: 100%;width: 18rpx;"></view>
								<view style="width: 192rpx;height: 100%;">
									<text class="f2">{{item.title}}</text>
								</view>
								
								<view style="width: 196rpx;height: 100%;"></view>
								
								<view style="width: 94rpx;height: 100%;display: flex;justify-content: center;align-items: center;">
									
									<view v-if="item.isNew" style="display: flex;justify-content: center;align-items: center;" >
										<image style="width: 16rpx;height: 16rpx;" src="../../static/更新.png"></image>
									
										<view style="width: 8rpx;height: 100%;"></view>
									
										<text class="f3" style="width: 72rpx;height: 40rpx;">有更新</text>
												
									</view>
									
								</view>
								
								<view style="width: 26rpx;height: 100%;"></view>
								
								<view style="height: 100%;width: 20rpx;display: flex;justify-content: center;align-items: center;">
									<image style="height: 20rpx;width: 20rpx;" src="../../static/常用_更多.png"></image>
								</view>
								
								
							</view>
							
							<view style="height: 100%;width: 32rpx;"></view>
						</view>
						
					</view>
				</uni-col>
			</uni-row>
			
			<view style="height: 24rpx;width: 100%;"></view>
		</template>
		
		<view style="height: 304rpx;width: 100%;background-color: #F1F5FF;"></view>
		
		<view style="height: 34rpx;width: 100%;text-align: center;background-color: #F1F5FF;">
			<text class="f1">移动端仅显示最新动态，更多内容查看PC端</text>
		</view>
		
		<view style="height: 198rpx;width: 100%;background-color: #F1F5FF;"></view>
		
	</view>
	<myTabbar :current-page="2"></myTabbar>
</template>

<script setup>
	import myTabbar from '../../component/myTabbar/index.vue'
	import {ref} from 'vue'
	import myHeadTab from '../../component/myHeadTab/index.vue'
	
	
	
	const abilities = ref([
		{
			title: '招生能力测试',
			icon: '../../static/招生能力测试.png',
			isNew: true,
			clickFunction: ()=>{
				uni.navigateTo({
					url:`/pages/test/index`, //建议这么写
				})
			}
			
		},
		{
			title: '我的活动',
			icon: '../../static/我的活动.png',
			isNew: true,
			clickFunction: ()=>{
				uni.navigateTo({
					url:`/pages/activities/mine/index`, //建议这么写
				})
			}
			
		},
		{
			title: '我的组员',
			icon: '../../static/我的组员.png',
			isNew: true,
			clickFunction: ()=>{
				uni.navigateTo({
					url:`/pages/teamMember/index`, //建议这么写
				})
			}
		},
		{
			title: '报名审批',
			icon: '../../static/报名审批.png',
			isNew: false,
			clickFunction: ()=>{
				uni.navigateTo({
					url:`/pages/register/index`, //建议这么写
				})
			}
		},
		{
			title: '招宣资料',
			icon: '../../static/招宣资料.png',
			isNew: false,
			clickFunction: ()=>{
				uni.navigateTo({
					url:`/pages/resource/index`, //建议这么写
				})
			}
		},
		
	])
	
</script>

<style scoped>
.card{
	height: 152rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
}

.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}
.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 76rpx;
}
.f3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}
</style>
